<!DOCTYPE html>
<!-- vue.js组件 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<runoob></runoob>
			<shuangshuang></shuangshuang>
			
			<input v-model="parentMsg" />
			<child2 :cmessage="parentMsg"></child2>
			<br>
		</div>
		
		<script src="../utils/vue.js"></script>
		<script>
		// ******************************************
			//自定义组件注册(全局组件)
			Vue.component('runoob', {
				template: `
					<div>
						<h1>自定义组件--我是全局组件</h1>
					</div>
				`
			});
			// 注册局部组件
			var child = {
				template: `
					<div>
						<h3>在实例选项中注册局部组件，这样组件只会在这个实例中调用</h3>
					</div>
				`
			};
			// ******************************************
			//声明props,利用props实现父组件向子组件传值
			// <!-- prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。 -->
			Vue.component('child2', {
				props: ['cmessage'],
				template: `
					<div>
						<span>{{cmessage}}</span>
					</div>
				`
			})
			// ******************************************
			//创建根实例
			new Vue({
				el: "#app",
				data: {
					parentMsg: '父组件内容'
				},
				components: {
					'shuangshuang': child,
				}
			})
		</script>

	</body>
</html>
